<template>
  <div>
    <div class="w100 rowsc rowsm fs-24 fw-b col333 mb-20">{{title}}</div>
    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">劳动项目：</div>
      <el-input v-model="name" placeholder="请输入您的劳动项目" class="w-400 input"></el-input>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">劳动时间：</div>
      <el-date-picker
      v-model="time"
       type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
       :default-time="['00:00:00', '00:00:00']">
    </el-date-picker>
    </div>

    <div class="w100 bgff br-16 h-68 rowsb rowsm pl-20 pr-20 trt mb-20">
      <div class="fs-20 col333 fw-b">劳动地点：</div>
      <el-input v-model="address" placeholder="请输入您的劳动地点" class="w-400 input"></el-input>
    </div>

    <div class="w100 bgff br-16 p-all-20 mb-20">
      <div class="fs-20 col333 fw-b mb-10">简要说明：</div>
      <el-input
      type="textarea"
      :rows="4"
      placeholder="请输入您的劳动说明"
      class="input"
       v-model="info">
      </el-input>
    </div>

    <div class="w100 bgff br-16  pl-20 pr-20 trt mb-40"  style="padding: 20px">
      <div class="fs-20 col333 fw-b" style="text-align: left; ">附件上传：</div>
        <el-upload
        class="upload-demo"
        :action="`${this.$apiUploadUrl}/api/utils/ossUpload`"
        :show-file-list="true"
        :multiple="true"
        :limit="6"
        :on-success="uploadSuccess"
        :on-error="uploadErr"
        :on-remove="delFile"
        :before-upload="beforeUpload"
        :disabled="isUploadSuccess"
        accept=".doc, .docx, .pdf, .xls, .xlsx, .jpg, .jpeg, .png, .mov, .avi"
      >
        <div class="rows rowsm">
          <img src="../../../static/img/icon_sc.png" class="w-30 h-30" alt="">
          <div class="fs-20 col888">（可上传word、pdf、excel、图片）</div>
        </div>
        <p class="mark">附件总上传不超过6M（每张图片大小建议不超过1M）</p>
      </el-upload>
    </div>

    <div class="w100 rowsc rowsm" >
      <el-button  type="primary"
        class="w-400 h-60 br-30 fs-24"
        style="background-color: #E33636;border:none;font-size:22px;border-radius: 30px;"
        :disabled="isUploadSuccess"
        @click="submit"
      >提交</el-button>
      <!-- <div class="w-400 h-60 br-30 rowsc rowsm colfff fs-20" disabled style="background-color: #E33636;" @click="submit()">提交</div> -->
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    title:{
      type:String
    },
    type:{
      type:String
    }
  },
  data() {
    return {
      name:'',
      time:'',
      info:'',
      address:'',
      file:'',
      fileName:'',
      fileType:'',
      proFileList:[],
      isUploadSuccess:false,
      totalSize: 0,
    };
  },
  watch: {},
  computed: {},
  methods: {
    delFile(file){
      console.log('....',file)
      this.proFileList = this.proFileList.filter(item => item.file != file.response.url)
      this.totalSize = this.totalSize - file.size
    },
    beforeUpload(file){
      this.isUploadSuccess = true
      const isLt100M = file.size / 1024 / 1024 < 6;
      if (!isLt100M) {
        this.$message.warning('上传的文件大小不能超过 6MB!');
        this.isUploadSuccess = false
      }
      console.log(this.proFileList)
      console.log(this.totalSize,file.size);
      if (this.totalSize + file.size  > 6 * 1024 * 1024) {
        this.$message.warning('所有文件总大小不能超过 6MB!');
        this.isUploadSuccess = false;
        return false;
      }
      return isLt100M;
    },
    uploadSuccess(response, file, fileList){
    if(response.code == 200){
      console.log('success');
      console.log(response, file, fileList)
      this.proFileList.push({
        file:response.url,
        fileName:response.originalFilename,
        fileType:file.raw.type.split('/')[0] == 'image' ? file.raw.type.split('/')[0] : 'file',
        size: file.size,
      })
      this.calculateTotalSize();
      this.$message.success('上传成功');
      this.isUploadSuccess = false
    }else{
      console.log('err',file);
      // 上传失败，删除文件名
      fileList.splice(fileList.indexOf(file),1);
      this.$notify({title: '提示',message: response.msg || '上传失败'});
      this.isUploadSuccess = false

    }

    },
    uploadErr(err, file, fileList){
      console.log('err');
      console.log(err, file, fileList)
    },
    calculateTotalSize() {
      this.totalSize = this.proFileList.reduce((acc, item) => {
        return acc + item.size;
      }, 0);
    },
    submit(){
      // console.log();
      if(!this.name) return this.$notify({title: '提示',message: '请输入项目名'});
      if(!this.time) return this.$notify({title: '提示',message: '请选择时间'});
      if(this.time){
        let startTime = new Date(this.time[0]).getTime()
        let stopTime = new Date(this.time[1]).getTime()
        if(this.type == '1'){
          if((stopTime - startTime) < 1800000) return this.$notify({title: '提示',message: '每次活动不少于0.5小时'});
        }else if(this.type == '2'){
          if((stopTime - startTime) < 3600000) return this.$notify({title: '提示',message: '每次活动不少于1小时'});
        }else if(this.type == '3' ||this.type == '10'){
          if((stopTime - startTime) < 7200000) return this.$notify({title: '提示',message: '每次活动不少于2小时'});
        }
      }
      if(!this.address) return this.$notify({title: '提示',message: '请输入地点'});
      if(!this.info) return this.$notify({title: '提示',message: '请输入内容'});
      if(this.proFileList.length == 0) return this.$notify({title: '提示',message: '请上传文件'});

      let data = {
        type:this.type,
        name:this.name,
        startTime:this.time[0],
        stopTime:this.time[1],
        position:this.address,
        content:this.info,
        file:this.file,
        fileType:this.fileType,
        fileName:this.fileName,
        proFileList:this.proFileList
      }
      this.$axios.post('prold/add',{...data}).then(res => {
        this.$notify({
          title: '提示',
          message: res.data.msg
        });
        if(res.data.code != 200) return
        setTimeout(() => {
          this.$emit('back')
        },1000)
      })
    }
  },
  created() {},
  mounted() {
    console.log('type',this.type);
  }
};
</script>
<style lang="scss" scoped>
.input /deep/ .el-input__inner  {
  border: none;
  background-color: rgba(0, 0, 0, 0);
  font-size: 20px;
  text-align: right;
}
.filePall{

}

</style>